<template>
  <div class="floor-layout tpl-70">
    <div class="layout-main">
      <div v-if="data.blockStyle.showTitle" class="near_title">{{data.blockStyle.title}}</div>
      <div class="near_list">
        <div class="near_item" v-for="(block, index) in data.blockList" :key="index">
          <a class="shop_msg" :href="`/shop/${block.id}`">
            <div class="shop_logo"><img :src="block.block_value.logo" /></div>
            <div class="shop_info">
              <div class="name">{{block.block_value.name}}</div>
              <div class="delivery">
                <span>起送￥20</span><span>配送￥5</span>
              </div>
            </div>
            <div class="near">
              <div class="near-cell">2.2km</div>
              <div class="near-cell">50分钟</div>
            </div>
          </a>
          <div class="pro_row">
            <div class="pro_cell"
              v-for="(blockItem, proIndex) in block.block_value.proList"
              :key="`proIndex${proIndex}`">
              <div class="goods_pic"><img :src="blockItem.goods_pic" /></div>
              <div class="sale_price">￥{{blockItem.sale_price}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'
  import request from '@/utils/request'
  import { api } from '~/ui-domain'

  const noImg = '';
  export default {
    name: 'tpl_70',
    mixins: [mixin],
    title: '附近门店',
    dataTpl: {
      tpl_id: 70,
      blockList: [
        {
          block_type: 'GOODS',
          block_value: {
            id: null,
            logo: noImg,
            name: '商品名称',
            proList: [
              {
                goods_pic: noImg,
                sale_price: 99
              },
              {
                goods_pic: noImg,
                sale_price: 99
              },
              {
                goods_pic: noImg,
                sale_price: 99
              }
            ]
          },
          block_opt: ''
        }
      ],
      blockStyle: {
        showTitle: true,
        title: '附近门店',
        limitNum: 3,
        showType: false,
        shop_tag: undefined
      }
    },
    mounted() {
      // this.getShopList()
    },
    methods: {
      // async getShopList () {
      //   let _params = {
      //     page_no: 1,
      //     page_size: this.data.blockStyle.limitNum,
      //     shop_lat: 31.153127,
      //     shop_lng: 121.429462
      //   }
      //   request({
      //     url: `${api.buyer}/shops/list-nearby`,
      //     method: 'get',
      //     loading: false,
      //     _params
      //   }).then(res => {
      //     let _base = this.MixinClone(this.data.blockList)
      //     let _shopList = res.data.map(item => {
      //       let _shopItem = {
      //         block_type: 'GOODS',
      //         block_value: {
      //           id: item.shop_id,
      //           logo: item.shop_logo,
      //           name: item.shop_name,

      //           proList: []
      //         }
      //       }
      //       item.goods_list.forEach(goodsItem => {
      //         _shopItem.block_value.proList.push({
      //           id: goodsItem,
      //           goods_pic: goodsItem,
      //           sale_price: goodsItem
      //         })
      //       })
      //       return _shopItem;
      //     })
      //     this.data.blockList = _shopList;
      //     this.$forceUpdate();
      //   });
      // }
    // },
    // computed: {
    //   /*
    //     * @date 2020-02-20
    //     * @author wolfMan
    //     * @description {计算显示数量是否改变}
    //   */
    //   // limitNum () {
    //   //   return JSON.stringify(this.data.blockStyle.limitNum);
    //   // }
    // },
    // watch: {
    //   limitNum (newVal) {
    //     if (newVal) {
    //       // this.getShopList();
    //     }
    //   }
    }
  }
</script>